<template>
  <div class="content" v-if="patientDetail.name">
    <!-- Navbar -->
    <navBar title="支付"></navBar>
    <!-- 付款信息 -->
    <div class="head">
      <div class="price">图文问诊 {{payOrderInfo.payment}} 元</div>
      <div class="doctor">
        <img
          class="photo"
          src="@/assets/upload/doctor-portrait@2x.png"
          alt=""
        />
        <div class="allocation">
          <div class="caption">极速问诊</div>
          <p class="name">自动分配医生</p>
        </div>
      </div>
    </div>
    <!-- 患者信息 -->
    <div class="main">
      <van-cell-group>
        <van-cell title="优惠券" :value="`-￥${payOrderInfo.couponDeduction}`" />
        <van-cell title="积分抵扣" :value="`-￥${payOrderInfo.pointDeduction}`" />
        <van-cell title="实付款" :value="`￥${payOrderInfo.actualPayment}`" class="payment" />
      </van-cell-group>
      <van-cell-group class="patientInfo">
        <van-cell title="患者信息" :value="`${patientDetail.name} | ${patientDetail.genderValue} | ${patientDetail.age}岁`" />
        <van-cell title="病情描述" :label="$store.state.illness.illnessInfo.message" />
      </van-cell-group>
      <div class="agree">
        <van-checkbox v-model="checked" checked-color="#16c2a3" icon-size="0.37rem">
          我已同意
          <span class="pay">支付协议</span>
        </van-checkbox>
      </div>
    </div>
    <!-- 支付按钮 -->
      <van-submit-bar :price="payOrderInfo.actualPayment*100" text-align="left" button-color="#16c2a3" button-text="立即支付" @submit="onSubmit" />

    <!-- 支付弹出层 -->
    <PayPopup v-model="isPopup" :orderId="orderId" payCallback="https://cp.itheima.net/room" :actualPayment="payOrderInfo.actualPayment"></PayPopup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { payOrder, getPatientDetail, saveOrder } from '@/api'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'

const store = useStore()
const route = useRoute()

// 获取就诊信息和抵扣信息
const payOrderInfo = ref({})
const patientDetail = ref({})
const getPayInfo = async () => {
  const { data } = await payOrder({
    type: 2,
    illnessType: store.state.illness.illnessType
  })
  payOrderInfo.value = data
  const res = await getPatientDetail(route.params.id)
  patientDetail.value = res.data
}
getPayInfo()

// 支付协议复选框
const checked = ref(false)
// 患病时间对应数据
const illnessTime = ref({
  一周内: 1,
  一月内: 2,
  半年内: 3,
  半年以上: 4
})

// 支付
const orderId = ref('')
const onSubmit = async () => {
  if (!checked.value) {
    showToast('请勾选我已同意支付协议')
    return
  }
  isPopup.value = true
  const { data } = await saveOrder({
    type: 2,
    illnessType: store.state.illness.illnessType,
    patientId: route.params.id,
    depId: store.state.illness.depId,
    illnessDesc: store.state.illness.illnessInfo.message,
    illnessTime: illnessTime.value[store.state.illness.illnessInfo.illnessTime],
    consultFlag: store.state.illness.illnessInfo.seeDoctor === '就诊过' ? 1 : 0,
    pictures: store.state.illness.pictures
  })
  orderId.value = data.id
}

// 支付弹出层显示隐藏
const isPopup = ref(false)
</script>

<style lang="scss" scoped>
// 付款信息
.head {
  margin-top: 90px;
  padding: 30px;
  background-color: #fff;
  .price {
    margin-bottom: 20px;
    font-size: 32px;
  }
  .doctor {
    display: flex;
    align-items: center;
    .photo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
    .allocation {
      margin-left: 24px;
      .caption {
        font-size: 32px;
      }
      .name {
        font-size: 26px;
        color: #6f6f6f;
      }
    }
  }
}

// 患者信息
.main {
  margin-bottom: 140px;
  background-color: #fff;
  .patientInfo {
    margin-top: 26px;
  }
  .van-cell {
    line-height: 2.3;
  }
  .payment {
    ::v-deep .van-cell__value {
      font-size: 32px;
      color: #eb5757;
    }
  }
  .agree {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    font-size: 28px;
    .pay{
      color: #16c2a3;
    }
  }
}

::v-deep .van-submit-bar__button{
  width: 300px;
}
</style>
